<!-- 隐患排查数据分析 -->
<template>
  <div class="wrap">
    <a-tooltip :title="treeKey.value  ? '' : '请选择公司'">
      <a-button type="primary" :ghost="true" :disabled="!treeKey.value" @click="onOpen"> 数据分析 </a-button>
    </a-tooltip>
    <a-drawer :title="`【${ companyName}】数据分析`" placement="right" :visible="visible"
      width="calc(100vw - 220px)" @close="onClose" wrapClassName="drawerWrap">
      <div class="contentWrap">
        <div class="head">
          <a-space>
            <!-- 分析类型 -->
            <div style="width: 120px">
              <a-select :value="type" :options="selectTypeOptions" @change="(e) => selectChange(e, 'type')"
                style="width: 100%">
              </a-select>
            </div>
            <template>
              <a-date-picker @change="onDateChange" :value="dateFormater" placeholder="请选择日期" v-if="type == 1" />
              <a-month-picker placeholder="请选择月份" @change="onDateChange" :value="dateFormater" v-else-if="type == 2" />

              <FormYear :formData="{ selectDate }" dataIndex="selectDate" :onCallBack="dateFormChange"
                v-else-if="type == 3"></FormYear>
            </template>
            <!-- 排列方式 -->
            <!-- <div style="width: 120px" v-if="false">
              <a-select
                :value="selectRowActive"
                :options="selectRowOptions"
                @change="(e) => selectChange(e, 'selectRowActive')"
                style="width: 100%"
              >
              </a-select>
            </div> -->
          </a-space>
        </div>
        <div class="content">
          <a-row :gutter="[12, 12]">
            <a-col :span="showChart[item].colSpan" v-for="(item, index) in Object.keys(showChart)" :key="index">
              <a-card class="itemCollapse" :title="showChart[item].name" size="small">
                <a-space v-if="showChart[item].order && showChart[item].data.length > 0" slot="extra">
                  <!-- <a-button type="link">全部</a-button> -->
                  <!-- <ShowModalList
                    :list="showChart[item].data"
                    :title="showChart[item].name"
                    :item="showChart[item]"
                  ></ShowModalList> -->
                  <a href="#" @click="handChangOrder(item, showChart[item].order)">
                    <template v-if="showChart[item].order == 'desc'">
                      <span>降序</span>
                    </template>
                    <template v-else-if="showChart[item].order == 'asc'">
                      <span>升序</span>
                    </template>
                  </a>
                </a-space>
                <div class="colCOntent">
                  <template v-if="['column', 'pie'].includes(showChart[item].type)">
                    <div class="itemInfo">
                      <ManageEchart v-if="
                        Array.isArray(showChart[item].data) && showChart[item].data.length > 0
                      " :type="showChart[item].type" :setting="showChart[item].setting || {}"
                        :data="formatChartData(showChart[item], showChart[item].order)">
                      </ManageEchart>
                      <a-empty v-else></a-empty>
                    </div>
                  </template>
                </div>
              </a-card>
            </a-col>
          </a-row>
        </div>
      </div>
    </a-drawer>
  </div>
</template>
<script>
import ManageEchart from "@/components/ManageEchart/ManageEchart";
import FormYear from "@/views/manage/components/components/FormYear";
import moment from "moment";
import ShowModalList from "@/components/ZSModal/ShowModalList";
export default {
  name: "Analysis",
  components: {
    ManageEchart,
    FormYear,
    ShowModalList,
  },
  props: {
    treeKey: {
      type: Object,
      default: () => { }
    },
    sponsoredUnit: {
      type: [Number, String],
    }
  },
  data() {
    return {
      visible: false,
      showChart: {
        deptMap: {
          name: "部门隐患统计",
          colSpan: 12,
          type: "column",
          data: [],
          order: "desc",
        },
        classGroupMap: {
          name: "班组隐患统计",
          colSpan: 12,
          type: "column",
          data: [],
          order: "desc",
        },
        personMap: {
          name: "个人隐患统计",
          colSpan: 12,
          type: "column",
          data: [],
          order: "desc",
        },
        hiddenDangerLoop: {
          name: "隐患类型环比",
          colSpan: 12,
          type: "pie",
          data: [],
        },
      },
      // 选项
      selectTypeOptions: [
        {
          label: "日分析",
          value: 1,
        },
        {
          label: "月分析",
          value: 2,
        },
        {
          label: "年分析",
          value: 3,
        },
      ],
      selectRowOptions: [
        {
          label: "一行一列",
          value: 24,
        },
        {
          label: "一行两列",
          value: 12,
        },
        {
          label: "一行三列",
          value: 8,
        },
        {
          label: "一行四列",
          value: 6,
        },
      ],
      selectRowActive: 8,
      type: 1,
      selectDate: null,
      // company: "605521150",
      loading: false,
      companyName: "",
    };
  },
  methods: {
    // 重置
    rest() {
      this.loading = false;
      let tempShowChart = this.showChart;
      let arr = Object.keys(tempShowChart);
      this.companyName = '';
      arr.filter((val) => {
        tempShowChart[val].data = [];
      });
    },
    // 初始化
    initData() {
      let locations = localStorage.getItem("analysis");
      if (locations) {
        locations = JSON.parse(locations);
      } else {
        locations = {
          type: 1,
          selectDate: moment().format("YYYY-MM-DD"),
        };
      }
      this.type = locations.type;
      this.selectDate = locations.selectDate;
      this.getData(locations);
    },
    onClose() {
      this.visible = false;
    },
    onOpen() {
      this.visible = true;
    },
    handleClose() { },
    // 切换类型
    selectChange(e, t) {
      this[t] = e;

      let obj = {
        1: "YYYY-MM-DD",
        2: "YYYY-MM",
        3: "YYYY",
      };
      let tD = this.selectDate;
      let res = tD ? moment(tD).format(obj[this.type]) : null;
      this.getData({
        selectDate: res,
      });
    },
    // 切换日期 日 月
    onDateChange(e, s) {
      this.selectDate = s;
      this.getData();
    },
    // 切换日期 年
    dateFormChange(e) {
      this.selectDate = e;
      this.getData();
    },
    getData(aParams) {
      let params = {
        selectDate: this.selectDate,
        type: this.type,
        company: this.sponsoredUnit,
        ...aParams,
      };
      if (this.loading) {
        return;
      }
      this.loading = true;
      this.postAxios(this.$hiddenPerilSearch, params)
        .then((res) => {
          if (res.code == 200) {
            let data = res.data;
            let tempShowChart = this.showChart;
            let arr = Object.keys(tempShowChart);
            this.companyName = res.data.companyName || '';
            arr.filter((val) => {
              tempShowChart[val].data = data[val].map((vals) => ({
                ...vals,
                label: vals.name || vals.label,
                name: vals.name || vals.label,
                value: vals.num || vals.value,
              }));
            });
            this.showChart = tempShowChart;
          }
        })
        .catch(() => { })
        .finally(() => {
          this.loading = false;
        });
    },
    handChangOrder(e, type) {
      this.showChart[e].order = type == "asc" ? "desc" : "asc";
    },
    formatChartData(e, type) {
      let list = JSON.parse(JSON.stringify(e.data));
      if (type == "asc") {
        list = list.filter((val, ind) => ind > list.length - 10);
      } else if (type == "desc") {
        let arr = [];
        list.forEach((e, i) => {
          arr.unshift(e);
        });
        arr = arr.filter((e, i) => {
          if (list.length <= 10) {
            return e;
          } else if (list.length > 10) {
            if (i >= list.length - 10) {
              return e;
            }
          }
        });
        list = arr;
      }
      // 刚开始是 升序 展示的
      return list;
    },
  },
  computed: {
    dateFormater() {
      let obj = {
        1: "YYYY-MM-DD",
        2: "YYYY-MM",
        3: "YYYY",
      };
      let t = this.selectDate;
      let res = t ? moment(t).format(obj[this.type]) : null;
      this.selectDate = res;
      return res;
    },
  },
  watch: {
    visible: {
      handler(nVal, oVal) {
        if (nVal) {
          this.initData();
        } else {
          this.rest();
        }
      },
      immediate: true,
    },
  },
};
</script>
<style lang="less" scoped>
.wrap {}

.drawerWrap {
  ::v-deep {
    .ant-drawer-body {
      padding: 0px;
    }
  }

  .contentWrap {
    height: calc(100vh - 56px);
    background: #f0f2f5;

    .head {
      height: 40px;
      background-color: #ffffff;
      padding: 0px 10px;
      display: flex;
      align-items: center;
    }

    .content {
      height: calc(100vh - 56px - 50px);
      padding: 10px 10px 0px 10px;
      margin-top: 10px;
      background-color: #ffffff;
      overflow-x: hidden;
      overflow-y: auto;

      .itemCollapse {

        // overflow: hidden;
        ::v-deep {
          .ant-card-body {
            padding: 0px;
          }
        }

        .colCOntent {
          height: 35vh;

          // background-color: pink;
          .itemInfo {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            // ::v-deep {
            //   .ant-empty {
            //     height: 100%;
            //   }
            // }
          }
        }
      }
    }
  }
}
</style>
